<template>
	<view :class="['otc',{'dark':theme=='dark'}]">

		<!-- 我要买，我要卖 -->
		<view :class="['bglist1','funs',{'darksss':theme=='dark'}]">
			<view style="width: 48vw;">
				<u-tabs :list="list1" :is-scroll="false" font-size="32" active-color="#ffffff" inactive-color="#dadada"
					:show-bar="false" :bg-color="false" :current="current" @change="change"></u-tabs>
			</view>

			<view class="side">
				<view class="order" @click="funsItemClick(1)">
					<u-icon size="40" name="order" color="#ffffff" @click="uni.navigateTo({url:current == 0?'/pages/business/Purchaserecord':'/pages/business/Sellingrecord'})">
					</u-icon>
				</view>
			</view>
		</view>

		<!-- 显示可以交易的法币类型 -->
		<view :class="['bglist2','funs',{'darksss':theme=='dark'}]">
			<view style="width:420rpx;">
				<u-tabs :list="list2" :is-scroll="false" :bg-color="false"  inactive-color="#909090":current="current2" @change="change2">
				</u-tabs>
			</view>
		</view>

		<!-- 显示法币市场正在销售的信息 -->
		<view :class="['bglist3','funs',{'darksss':theme=='dark'}]">
			<view class="wrap">
			<!-- 修改样式 -->
			<u-gap height="20" bg-color=""></u-gap>
			<u-table border-color="#22253c00" bg-color="#22253c00" align="left" padding="14rpx 0" v-for="(item,index) in dataList" :key="index">
				<view :class="['juzonucom','tool-card',{'darksss':theme=='dark'}]">

					<view :class="['wrap','juzonucg',{'darksss':theme=='dark'}]">
						<u-tr class="u-tr">
							<u-td class="u-td">
								<view class="fuwen">{{item.nickName.substring(0,1)}}</view>
							</u-td>
							<u-td class="juzonuc u-td">
								<view></view>
							</u-td>
							<u-td class="juzon u-td">
								<view class="fuwenn">{{item.nickName}}</view>
							</u-td>
						</u-tr>
					</view>

					<u-line color="#5559691f"></u-line>
					<u-gap height="20" bg-color=""></u-gap>

					<u-tr class="u-tr">
						<u-td>{{$t('bico.W00')}}</u-td><u-td class="juzonuc"></u-td>

						<u-td class="redee juzon" v-show="current == 0">{{item.unitPrice}} USD</u-td>
						<u-td class="juzon greee" v-show="current == 1">{{item.unitPrice}} USD</u-td>
					</u-tr>

					<u-tr class="u-tr">
						<u-td>{{$t('bico.W02')}}</u-td><u-td class="juzon">{{item.restNumber.toFixed(6)}} {{item.coin}}</u-td>
					</u-tr>
					
					<u-tr class="u-tr">
						<u-td>{{$t('bico.W01')}}</u-td>
						<u-td class="juzon">{{item.lowPrice}} USD - {{(item.restNumber*item.unitPrice).toFixed(2)}} USD</u-td>
					</u-tr>
					
					<u-line color="#5559691f"></u-line>
					<!-- <u-gap height="20" bg-color=""></u-gap> -->
					<u-tr class="u-tr">
						<u-td>
							<!-- 支付宝 -->
							<u-col span="1" v-if="item.payMethod == 'ALI_PAY'">
								<view class="">
									<image class="funsItemImage" src="../../static/business/zfb.png"></image>
								</view>
							</u-col>
							<!-- 微信 -->
							<u-col span="1" v-else-if="item.payMethod == 'WE_CHAT'">
								<view class="">
									<image class="funsItemImage" src="../../static/business/wx.png"></image>
								</view>
							</u-col>
							<!-- 银行卡 -->
							<u-col span="1" v-else="item.payMethod =='BANK'">
								<view class="">
									<image class="funsItemImage" src="../../static/business/yhk.png"></image>
								</view>
							</u-col>
						</u-td>

						<u-td class="juzonuc">
						</u-td>

						<u-td class="juzon">
							<view class="">
								<u-button type="error" size="mini" @click="showModelFun(item)" v-if="current == 0">{{$t('bico.W03')}}
								</u-button>
								<u-button type="success" size="mini" @click="showModelFun(item)" v-else>{{$t('bico.W04')}}</u-button>
							</view>
						</u-td>
					</u-tr>
				</view>
				<u-gap height="20" bg-color=""></u-gap>
			</u-table>
			<!-- 修改样式 -->
			</view>

			<!-- 购买 出售 下拉 弹窗 -->

			<u-popup v-model="showModal" mode="bottom" border-radius="28" :height="current==1?'74%':'64%'">
				<view class="box"
					:style="current==1?'height: 480px;line-height: 1.8;':'height: 420px;line-height: 1.8;'">
					<view class="coin">
						<view>
							<view class="name">{{sideMap[current]}}{{ad.coin}}</view>
						</view>
						<view>
						</view>
					</view>

					<view class="type">
						<view @click="changeType(0)" :class="form.type == 0 ? 'active' : ''"> {{$t('bico.W05')}} {{sideMap[current]}}
						</view>
						<view @click="changeType(1)" :class="form.type == 1 ? 'active' : ''"> {{$t('bico.W06')}} {{sideMap[current]}}
						</view>
					</view>

					<view class="input">
						<view><input @blur="blur" @focus="focus" class="uni-input" cursor-spacing="0"
								:adjust-position="false" v-model="form.volume" type="digit"
								:placeholder="placeholder[form.type]" />
						</view>
						<view><text class="i cny">{{form.type == 1?'USD':'CNY'}}</text> | <text @click="allBuy"
								class="i all">{{$t('bico.W07')}} {{sideMap[current]}}</text></view>
					</view>
					<view class="input" v-show="current == 1">
						<view><input class="uni-input" cursor-spacing="0" @focus="accountShowFun"
								:adjust-position="false" v-model="form.accountLabel" type="text" :placeholder="$t('bico.W09')" />
							<u-select mode="mutil-column-auto" v-model="accountShow2" :list="checkboxList"
								@confirm="confirm2">
							</u-select>
						</view>
						<view><text class="i cny"></text> <text @click="accountShowFun" class="i all">{{$t('bico.W08')}}</text>
						</view>
					</view>


					<!-- 间隔槽 -->
					<u-gap height="100" bg-color=""></u-gap>
					<view class="amount">
						<view class="t-p amountp">{{$t('bico.W10')}}</view>
						<view class="p">{{ad.restNumber}} USDT</view>
					</view>
					<!-- 加一条线 -->
					<u-line color="#5559691f"></u-line>
					<!-- 间隔槽 -->
					<u-gap height="100" bg-color=""></u-gap>
					<view class="amount">
						<view class="t-p amountp">{{$t('bico.W11')}}</view>
						<view class="p">{{ad.unitPrice}} USD</view>
					</view>
					<!-- 加一条线 -->
					<u-line color="#5559691f"></u-line>
					<!-- 间隔槽 -->
					<u-gap height="100" bg-color=""></u-gap>
					<view class="amount" v-show="form.type == 0">
						<view class="t-p amountp">{{$t('bico.W12')}}</view>
						<view class="p">{{ad.lowPrice}} - {{ad.totalPrice}} USD</view>
					</view>
					<view class="amount" v-show="form.type == 1">
						<view class="t-p amountp">{{$t('bico.W13')}}</view>
						<view class="p">{{ad.lowNumber}} - {{ad.restNumber}} </view>
					</view>
					<!-- 加一条线 -->
					<u-line color="#5559691f"></u-line>
					<!-- 间隔槽 -->
					<u-gap height="100" bg-color=""></u-gap>
					<view class="amount">
						<view class="t-p amountp">{{$t('bico.W14')}}</view>
						<view class="p">{{showVolume}} USDT</view>
					</view>
					<!-- 加一条线 -->
					<u-line color="#5559691f"></u-line>
					<!-- 间隔槽 -->
					<u-gap height="100" bg-color=""></u-gap>
					<view class="amount">
						<view class="t-p amountp">{{$t('bico.W15')}}</view>
						<view class="p amountpp">{{showAmount}} {{form.type == 1?'USD':'CNY'}}</view>
					</view>
					<!-- 加一条线 -->
					<u-line color="#5559691f"></u-line>

					<!-- 间隔槽 -->
					<u-gap height="100" bg-color=""></u-gap>
					<view class="btns">
						<view @click="cancel" class="btn cancel">{{$t('bico.W16')}}</view>
						<view @click="submit" class="btn cancell" :class="form.volume ? 'submit' : 'cancel'">{{$t('bico.W17')}}</view>
					</view>
				</view>
			</u-popup>


			<!-- 交易密码弹窗  55%宽度内外重合-->

			<u-popup v-model="passShow" mode="center" width="68%" height="15%" border-radius="14">
				<view class="passbox">
					<view class="input">
						<view><input @blur="blur" @focus="focus" class="uni-input" cursor-spacing="0"
									:adjust-position="false" v-model="form.password" type="password"
									:placeholder="$t('bico.W20')" />
						</view>
						<view><text class="i cny"></text> <text class="i all"></text></view>
						</view>
						<view class="btns">
						<view @click="form.password='';passShow = false" class="btn cancel">{{$t('bico.W18')}}</view>
						<view @click="sellOrBuy" class="btn cancell" :class="form.password ? 'submit' : 'cancel'">{{$t('bico.W19')}}</view>
					</view>
				</view>
			</u-popup>

		</view>

	</view>
</template>

<script>
	import {
		domain
	} from '@/common/domain.js'
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {
		tradeList,
		cnyPayList,
		legalMgrPage,
		tradeBuy,
		tradeSell,contractOptionConfig
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				ad: {},
				form: {
					payWay: '',
					accountId: '',
					accountLabel: '',
					type: 0, //类型
					side: undefined,
					password: '',
					volume: undefined, //数量
					advertId: undefined //不清楚
				},
				showModal: false,
				list1: [{
					name: this.$t('bico.W21'),
				}, {
					name: this.$t('bico.W22'),
				}],
				current: 0,
				accountShow2: false,
				payMeMap:{
					'ALI_PAY':this.$t('bico.W23'),
					'WE_CHAT':this.$t('bico.W24'),
					'BANK':this.$t('bico.W25'),
				},
				checkboxList: [{
						label: this.$t('bico.W23'),
						value: 'ALI_PAY',
						children: [{
							label: this.$t('bico.W23'),
							value: 'ALI_PAY',
						}, {
							label: this.$t('bico.W23'),
							value: 'ALI_PAY'
						}, ],
					},
					{
						label: this.$t('bico.W24'),
						value: 'WE_CHAT',
						children: [],

					},
					{
						label: this.$t('bico.W25'),
						value: 'BANK',
						children: [],

					}
				],
				list2: [
					/* {
										name: '全部',
										value:''
									} ,*/

					{
						name: 'USDT',
						value: 'USDT'
					},
					{
						name: 'ETH',
						value: 'ETH'
					},
					{
						name: 'BTC',
						value: 'BTC',
					}
				],
				placeholder: {
					0: this.$t('bico.W26'),
					1: this.$t('bico.W27'),
				},
				sideMap: {
					'0': this.$t('bico.W28'),
					'1': this.$t('bico.W29'),
				},
				showVolume: 0,
				showAmount: 0,
				current: 0,
				current2: 0,
				dataList: [],
				myOtc: {},
				passShow: false,
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		watch: {
			'form.volume'(v) {
				if (!v) {
					return
				}
				if (this.form.type == 0) {
					this.showVolume = (this.form.volume / this.ad.unitPrice).toFixed(6)
					this.showAmount = this.form.volume
				} else {
					this.showVolume = parseFloat(this.form.volume).toFixed(6)
					this.showAmount = parseFloat(this.form.volume) 
				}
			}
		},
		onLoad() {
			
			//下面一行就是设置上面标题的代码，复制修改括号里的标题，放在页面的onLoad()方法里最后面就可以了，
			this.$utils.setTitle(this.$t('bico.W38'),)
			
			//下面这三行注释的代码
			// uni.setNavigationBarTitle({
			// 	title: this.$t('login').otc
			// })
			
			this.$utils.setTheme(this.theme);
		},
		
		onShow() {
			this.getCoinConfig()
			this.getOtcList()
			this.getPayWayList()
			this.legalMgrPage()
		},
		methods: {
			sellOrBuy() {
				var that = this
				if (that.$utils.isEmpty(that.form.password)) {
					return false
				}

				var data = {}
				data.value = that.form.volume
				data.type = that.form.type == 1 ? 0 : 1
				data.password = that.form.password
				data.payPwd = that.form.password
				if (that.current == 0) { //购买
					data.sellId = that.ad.sellId
				} else { // 出售
					data.buyId = that.ad.buyId
					data.paymentId = that.form.accountId
				}
				that.$utils.initDataToken({
					url: that.current == 1?tradeSell:tradeBuy,
					data,
					type: 'post'
				}, (res, msg) => {

					if(msg.length>0){
						showLayer(msg);
					}else{
						setTimeout(() => {
							uni.hideLoading();
							that.passShow = false
							that.showModal = false
							that.getOtcList()
							that.$utils.showLayer(this.$t('bico.W30'),);
						}, 1500);
					}
				})
			},
			accountShowFun() {
				console.log(this.checkboxList)
				this.accountShow2 = true
			},
			getPayWayList() {
				var that = this
				that.$utils.initDataToken({
					url: cnyPayList,
					data: {
						size: 100
					},
					type: 'post'
				}, (res, msg) => {
					that.paywayArr = res.records;
					//that.change(that.current)
				})
			},
			confirm2(e) {
				this.form.payWay = e[0].value
				this.form.accountLabel = e[0].label
				if (this.current != 0) {
					this.form.accountId = e[1].value
					this.form.accountLabel = e[1].label
				}
			},
			legalMgrPage() {
				this.$utils.initDataToken({
					url: legalMgrPage,
					type: 'post'
				}, (res, msg) => {
					console.log(res)
					this.myOtc = res
					uni.setStorageSync('myOtc', res);
				})
			},
			showModelFun(item) {
				if (this.myOtc.realStatus != '1') {
					this.$utils.showLayer(this.$t('bico.W31'),);
					return
				}
				this.ad = item
				this.showModal = true
				var  that=this;


				var arr = that.paywayArr
				that.checkboxList=[
					{
						label: that.payMeMap[item.payMethod],
						value: item.payMethod,
						children: [],
					}
				]

				if (arr.length > 0) {
					arr.forEach(element => {

						if (element.type == item.payMethod) {
							that.checkboxList[0].children.push({
								label: element.idcard,
								value: element.paymentId
							})
						}
					});
				}
			},
			allBuy() {
				if (this.form.type == 0) {
					this.form.volume = (this.ad.restNumber) * this.ad.unitPrice
				} else {
					this.form.volume = this.ad.restNumber
				}
			},
			changeType(type) {
				this.form.type = type
				this.form.volume = undefined
				this.showAmount = 0
				this.showVolume = 0


			},
			cancel() {
				this.showModal = false
			},
			submit() {
				//限制 数量 金额， 同时换算成金额来比较
				this.form.volume = Number(this.form.volume)
				if(this.form.type == 0){
					//进行金额数量验证
					if (this.form.volume > this.ad.totalPrice) {
						//金额
						this.$utils.showLayer(this.$t('bico.W32'),);
						return
					}
					
					if(this.form.volume > (this.ad.restNumber*this.ad.unitPrice).toFixed(2)){
						this.$utils.showLayer(this.$t('bico.W33'),);
						return
					}
					 if(this.form.volume < this.ad.lowPrice){
						this.$utils.showLayer(this.$t('bico.W34'),+this.ad.lowPrice);
						return
					}
				}

				if (this.form.type == 1) {
					if( this.form.volume > this.ad.restNumber){
						//数量
						this.$utils.showLayer(this.$t('bico.W35'),);
						return
					}
					if(this.form.volume < this.ad.lowNumber){
						//数量
						this.$utils.showLayer(this.$t('bico.W36'),+250);
						return
					}
					if(this.form.volume *this.ad.unitPrice < this.ad.lowPrice){
						//数量
						this.$utils.showLayer(this.$t('bico.W37'),+this.ad.lowPrice);
						return
					}
						
					
					
				}
				if(!this.form.volume){
					this.$utils.showLayer(this.placeholder[this.form.type]);
					return
				}
				this.passShow = true
			},
			//获得焦点
			focus(e) {
				console.log("dfsj")
			},
			//失去焦点
			blur() {
				console.log("dfsj2222")
			},
			priceCancel() {
				this.form.volume = undefined
			},
			change(index) {
				var that = this
				that.current = index;
				// that.checkboxList.forEach(item => {
				// 	delete item.children
				// })
				that.form.payWay = ''
				that.form.accountId = ''
				that.form.accountLabel = ''
				//that.accountShow = true

				this.getOtcList()
			},
			change2(index) {
				this.current2 = index;
				this.getOtcList()
			},
			getOtcList() {
				var that = this
				console.log(that.list2[that.current2].value)
				// uni.showLoading();
				that.$utils.initDataToken({
					url: tradeList,
					data: {
						type: that.current,
						coin: that.list2[that.current2].value,
						payMethod: '',
						price: '',
						number: '',
						current: 1,
						size: 9,
					},
					type: 'post'
				}, (res, msg) => {
					uni.hideLoading();
					console.log(res)
					that.dataList = res.records
				})
			},
			getCoinConfig(){
				var that = this
				that.$utils.initDataToken({
					url: contractOptionConfig,
					type: 'post'
				}, (res, msg) => {
					that.list2 = []
					res.forEach(item=>{
						that.list2.push({
							name: item,
							value: item,
						})
					})
				})
			},
			//路由开始
			funsItemClick(index) {
				if (index == 1) {
					uni.navigateTo({url:this.current == 0?'/pages/business/Purchaserecord':'/pages/business/Sellingrecord'})
					// uni.navigateTo({
					// 	url: '/pages/otc/Orderrecord' //法币订单
					// })
				};
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/otc/Orderdetailsdd' //广告详情
					})
				};
			},
			//路由结束
		},

	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;

	}
	.passbox {
		position: fixed;
		background: #fff;
		display: flex;
		flex-direction: column;
		padding: 30upx 30upx;
		font-size: 28upx;
		    border-radius: 2vw;



		.input {
			line-height: 1.8;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 14upx 10upx;
			margin: 20upx 0;
			    border: 0.5px solid #b2b9deab;
			    border-radius: 4px;

			input {
				color: #0952C3;
				font-size: 28upx;
			}

			.cny {
				line-height: 1.8;
				margin-right: 20upx;
				color: #0952C3;
			}

			.all {
				line-height: 1.8;
				margin-left: 20upx;
				color: #0952C3;
			}
		}

		.btns {
			line-height: 1.8;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			padding: 10upx 0;

			.btn {
				display: block;
				width: 48%;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				color: #fff;
				border-radius: 0;
				font-size: 28upx;
				border-radius: 4px;
			}

			.cancel {
				background: #2979ff;
			}


			.submit {
				background: #0952C3;
			}
		}
	}

	.box {
		position: fixed;
		bottom: 12vw;
		background: #fff;
		line-height: 1.8;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 690upx;
		padding: 14px 15px;
		font-size: 28upx;

		.coin {
			line-height: 1.8;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 10upx;

			.name {
				font-size: 14px;
				padding-bottom: 10px;
				color: #FF5722;
				font-weight: 700;
			}

			.price {

				color: #0952C3;
			}

			.icon {

				width: 40px;
				height: 40px;
			}
		}

		.amountp {
		        font-size: 12px;
		        padding-bottom: 0px;
		        /* color: #FF5722; */
		        font-weight: 700;
		}

		.amountpp {
		        font-size: 12px;
		        padding-bottom: 0px;
		        color: #FF5722;
		        font-weight: 700;
		}

		.type {
			display: flex;
			flex-direction: row;
			padding: 10upx 0;

			view {
				margin-right: 30upx;
				position: relative;
				padding: 10upx 0;

				&.active {
					color: #2979ff;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 100%;
						height: 0;
						border-bottom: 1px solid #2979ff;
					}
				}
			}
		}



		.input {
			line-height: 1.8;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			padding: 14upx 10upx;
			margin: 20upx 0;
			    border: 0.5px solid #b2b9deab;
			    border-radius: 4px;

			input {
				color: #0952C3;
				font-size: 28upx;
			}

			.cny {
				line-height: 1.8;
				margin-right: 20upx;
				color: #0952C3;
			}

			.all {
				line-height: 1.8;
				margin-left: 20upx;
				color: #0952C3;
			}
		}

		.amount {
			line-height: 1.8;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 10upx 0;

			.p {
				font-size: 12px;
				/*color: #0952C3;*/

				    padding-bottom: 0px;
				    /* color: #FF5722; */
				    font-weight: 700;

			}
		}

		.btns {
			line-height: 1.8;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			padding: 10upx 0;

			.btn {
				display: block;
				width: 46%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: #ffffff;
				border-radius: 0;
				font-size: 28upx;
				    border-radius: 4px;
			}

			.cancel {
				    background: #2979ff12;
				    border: 1px solid #DCDFE6;
				    color: #474e71;
			}


			.cancell {
				background: #2979ff;
				    border: 1px solid #DCDFE6;
					color: #FFF;
			}

			.submit {
				background: #0952C3;
			}
		}
	}

	page {
		background: #f9f9f9;
	}

	.otc {
		width: 100%;
		height: 100%;

		.bglist1 {
			background: #3e38ec;
			height: 20vw;
		}

		.bglist2 {
			display: flex;
			height: 40px;
			line-height: 40px;
			background: #ffffff;
			position: relative;
			top: -8vw;
			border-top-left-radius: 3vw;
			border-top-right-radius: 3vw;
			 font-family: Times New Roman,Times,serif;
		}

		.bglist3 {
			position: relative;
			top: -10vw;
		}

		.side {
			position: absolute;
			top: 2vw;
			right: 0;
			left: 90vw;
		}

		.wrap {
			padding: 2vw;



			.center {
				    min-width: 50px;
				    min-height: 50px;
				    display: block;
				    position: relative;
				    background-color: #d83535;
			}
			.u-mode-center-box {
			    min-width: 50px;
			    min-height: 50px;
			    display: block;
			    position: relative;
			    background-color: #de3535;
			}



		}

		.u-row {
			margin: 2vw 0;
		}

		.demo-layout {
			height: 8vw;
			border-radius: 8rpx;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.income-card {
			width: 100%;
			background-color: #fff;
			border-radius: 1vw;
			padding: 2px;
			margin-top: 10px;
			border: 0.5px solid #5559691f;
		}

		.bic {
			position: relative;
			top: 0vw;
			right: -16vw;
			color: #b7b8bd;
			font-size: 3vw;
		}

		.apt {
			padding: 2vw 0;
			    font-size: 12px;
			    font-weight: 700;
		}

		.aptp {
			position: relative;
			font-size: 12px;
			font-weight: 700;
			top: 0vw;
			right: -11vw;
			padding: 2vw 0;
		}

		.aptpp {
			position: relative;
			top: 0vw;
			text-align: right;
			right: 2vw;
		}

		.tpc {
			font-size: 4vw;
			font-weight: 700;

		}

		.tpcc {
			font-size: 4vw;
			font-weight: 700;
			color: #4CAF50;
		}

		.funsItemImage {
			position: relative;
			top: 1vw;
			width: 25px;
			height: 25px;
			right: 4px;
			border-radius: 0%;
		}

		.gman {
			position: relative;
			top: 0vw;
			width: 88%;
			//right: 0;
			text-align: right;
			//left: 70vw;
		}

		.tit uni-image {
			width: 5px;
			height: 10px;
			position: relative;
			top: 0vw;
			right: -26vw;
			color: #b7b8bd;
			font-size: 3vw;
		}
		
		.u-size-mini {
		        display: inline-flex;
		        width: auto;
		        font-size: 14px;
		        padding-top: 1px;
		        height: 30px;
		        line-height: 30px;
		        padding: 0 10px;
		        border-radius: 2px;
		}









		.juzon {
			text-align: right!important;
		}
		.juzonuc {

			position: relative;
			top: 0vw;
			left: 7vw;
			font-size: 14px;
			font-family: Times New Roman,Times,serif;
		}
		.juzonucg {
			text-align: left;
			font-size: 14px;
			padding: 0px 2px;
			font-weight: 700;
		}
		.juzonucom {
			border: 0.5px solid #7079ab24;
			border-radius: 8px;
			padding: 0px 4px;
		}
		.juzonup {
			text-align: right!important;
			position: relative;
			top: -2vw;
			left: 22vw;
		}

		.tool-card {
			background-color: #ffffff;
		}
		
		.fuwen {
			color: #ffffff;
			background-color: #3e38ec;
			width: 25px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			font-size: 14px;
			font-weight: 600;
			border-radius: 30px;
		}
		.fuwenn {
			line-height: 25px;
			font-size: 16px;
			font-weight: 600;
		}

		.redee {
			color: #FF5722!important;
			font-size: 16px!important;
			font-weight: 700!important;
		}
		.greee {
			color: #4CAF50!important;
			font-size: 16px!important;
			font-weight: 700!important;
		}


	}
</style>
